<div id="gradeable_rubric">
    <label for="numeric_num-items">How many numeric items?</label> <input style="width: 50px" id="numeric_num-items" name="num_numeric_items" type="text" value="0" class="int_val ignore" onchange="calculateTotalScore();"/>
    &emsp;&emsp;

    <label for="numeric_num_text_items">How many text items?</label> <input style="width: 50px" id="numeric_num_text_items" name="num_text_items" type="text" value="0" class="int_val ignore"/>
    <br /> <br />

    <div class="multi-field-wrapper-numeric">
        <h5>Numeric Items</h5>
        <table class="numerics-table table table-bordered" style=" border: 1px solid #AAA; max-width:50% !important;">
            <!-- Headings -->
            <thead style="background: #E1E1E1;">
                <tr>
                    <th> Label </th>
                    <th> Max Score </th>
                    <th> Extra Credit?</th>
                </tr>
            </thead>
            <!-- Footers -->
            <tfoot style="background: #E1E1E1;">
                <tr>
                    <td><strong> Total </strong></td>
                    <td><strong id="totalScore"></strong></td>
                    <td><strong id="totalEC"></strong></td>
                </tr>
            </tfoot>
            <tbody style="background: #f9f9f9;">
            <!-- This is a bit of a hack, but it works (^_^) -->
                <tr class="multi-field" id="mult-field-0" style="display:none;">
                    <td>
                        <input style="width: 200px" name="numeric_label_0" type="text" aria-label="label for numeric item 0" class="numeric_label" value="0" />
                    </td>
                    <td>
                        <input style="width: 60px" type="text" name="max_score_0" aria-label="max score for numeric item 0" class="max_score" value="0" onchange="calculateTotalScore();"/>
                    </td>
                    <td>
                        <input type="checkbox" name="numeric_extra_0" aria-label="is numeric item 0 counted as extra credit?" class="numeric_extra extra" value="" onchange="calculateTotalScore();"/>
                    </td>
                </tr>
            </tbody>
        </table>
        <h5>Text Items</h5>
        <table class="text-table table table-bordered" style=" border: 1px solid #AAA; max-width:25% !important;">
            <thead style="background: #E1E1E1;">
                <tr>
                    <th> Label </th>
                </tr>
            </thead>
            <tbody style="background: #f9f9f9;">
            <!-- This is a bit of a hack, but it works (^_^) -->
                <tr class="multi-field" id="mult-field-0" style="display:none;">
                    <td>
                        <input style="width: 200px" name="text_label_0" aria-label="label for text item 0" type="text" class="text_label" value="0"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<br />
<!--Do you want a box for an (optional) message from the TA to the student?
<input type="radio" name="opt_ta_messg" value="true" /> Yes
<input type="radio" name="opt_ta_messg" value="false" /> No-->

<script type="text/javascript">
    function calculateTotalScore() {
        var total_score = 0;
        var total_ec = 0;

        $('.numerics-table').find('.multi-field').each(function() {
            var max_score = parseFloat($(this).find('.max_score').val());
            var extra_credit = $(this).find('.numeric_extra').is(':checked');

            if (extra_credit === true) total_ec += max_score;
            else total_score += max_score;
        });

        $("#totalScore").html(total_score);
        $("#totalEC").html("(" + total_ec + ")");
    }

    $(document).ready(function() {

        var numNumeric = 0;
        var numText = 0;

        function addNumeric(label, max_score, extra_credit) {
            var wrapper = $('.numerics-table');
            numNumeric++;
            $('#mult-field-0', wrapper).clone(true).appendTo(wrapper).attr('id', 'mult-field-' + numNumeric).find('.numeric_label').val(label).focus();
            $('#mult-field-' + numNumeric, wrapper).find('.numeric_extra').attr('name', 'numeric_extra_' + numNumeric).attr('aria-label', 'is numeric item ' + numNumeric + ' counted as extra credit?').change(() => saveRubric(false));
            $('#mult-field-' + numNumeric, wrapper).find('.numeric_label').attr('name', 'numeric_label_' + numNumeric).attr('aria-label', 'label for numeric item ' + numNumeric).change(() => saveRubric(false));
            $('#mult-field-' + numNumeric, wrapper).find('.max_score').attr('name', 'max_score_' + numNumeric).attr('aria-label', 'max score for numeric item' + numNumeric).val(max_score).change(() => saveRubric(false));
            if (extra_credit) {
                $('#mult-field-' + numNumeric, wrapper).find('.numeric_extra').attr('checked', true);
            }
            $('#mult-field-' + numNumeric, wrapper).show();
            calculateTotalScore();
        }

        function removeNumeric() {
            if (numNumeric > 0) {
                $('#mult-field-' + numNumeric, '.numerics-table').remove();
            }
            --numNumeric;
        }

        function addText(label) {
            var wrapper = $('.text-table');
            numText++;
            $('#mult-field-0', wrapper).clone(true).appendTo(wrapper).attr('id', 'mult-field-' + numText).find('.text_label').val(label).focus();
            $('#mult-field-' + numText, wrapper).find('.text_label').attr('name', 'text_label_' + numText).attr('aria-label', 'label for text item ' + numText).change(() => saveRubric(false));
            $('#mult-field-' + numText, wrapper).show();
        }

        function removeText() {
            if (numText > 0) {
                $('#mult-field-' + numText, '.text-table').remove();
            }
            --numText;
        }

        $('#numeric_num_text_items').on('change', function (e) {
            var requestedText = this.value;
            if (isNaN(requestedText) || requestedText < 0) {
                requestedText = 0;
            }
            while (numText < requestedText) {
                addText('');
            }
            while (numText > requestedText) {
                removeText();
            }

            // When changing text item count, save the rubric
            saveRubric(false);
        });

        $('#numeric_num-items').on('change', function (e) {
            var requestedNumeric = this.value;
            if (isNaN(requestedNumeric) || requestedNumeric < 0) {
                requestedNumeric = 0;
            }
            while (numNumeric < requestedNumeric) {
                addNumeric(numNumeric + 1, 0, false);
            }
            while (numNumeric > requestedNumeric) {
                removeNumeric();
            }

            // When numeric item count, save the rubric
            saveRubric(false);
        });

        let components = {{ gradeable_components_enc|raw }};
        $.each(components, function(i,elem) {
            if(i < {{ num_numeric }}) {
                var extra_credit = false;
                if (elem.upper_clamp > elem.max_value){
                    addNumeric(elem.title,elem.upper_clamp,true);
                }
                else{
                    addNumeric(elem.title,elem.max_value,false);
                }
            }
            else {
                addText(elem.title);
            }
        });
        $('#numeric_num-items').val({{ num_numeric }});
        $('#numeric_num_text_items').val({{ num_text }});
        $('#numeric').show();
        $('#grading_questions').show();
    });
</script>
